<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="选择日期" prop="date">
        <el-date-picker v-model="dateTime" type="month" placeholder="请选择月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="供应商" prop="provide">
        <el-input v-model="queryParams.provide" :disabled="provideShow" placeholder="请输入供应商" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:vendorPayment-sixteen:export']" >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-download" size="mini" @click="handleDetailsExport"
          v-hasPermi="['system:vendorPayment-sixteen:export']" >导出详情</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      <div class="textNuM">开票总金额：<span class="kpNum"> {{ formatNumber(this.allMoney) }}</span></div>
    </el-row>

    <el-table v-loading="loading" :data="vendorPaymentList" border>
      <el-table-column prop="index" label="序号" width="55" align="center"></el-table-column>
      <el-table-column label="日期" align="center" prop="createTime" width="100" />
      <el-table-column label="供应商名称" align="center" prop="provide" width="100" />
      <el-table-column label="财务编号" align="center" prop="financeCode" width="100" />

      <el-table-column label="平台(配件)" align="center" prop="outTotalMoney" width="120">
        <template slot-scope="scope">
          <span class="textNum2">{{ formatNumber(parseFloat(scope.row.outTotalMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士一公司(配件)" align="center" prop="outBus1" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outBus1).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士二公司(配件)" align="center" prop="outBus2" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outBus2).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士三公司(配件)" align="center" prop="outBus3" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outBus3).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士四公司(配件)" align="center" prop="outBus4" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outBus4).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士五公司(配件)" align="center" prop="outBus5" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outBus5).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="崇明巴士(配件)" align="center" prop="outCm" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outCm).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金山巴士(配件)" align="center" prop="outJs" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outJs).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客修公司(配件)" align="center" prop="outKx" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.outKx).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台(润滑油)" align="center" prop="RoutTotalMoney" width="130">
        <template slot-scope="scope">
          <span class="textNum2">{{ formatNumber(parseFloat(scope.row.RoutTotalMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士一公司(润滑油)" align="center" prop="RoutBus1" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutBus1).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士二公司(润滑油)" align="center" prop="RoutBus2" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutBus2).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士三公司(润滑油)" align="center" prop="RoutBus3" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutBus3).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士四公司(润滑油)" align="center" prop="RoutBus4" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutBus4).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士五公司(润滑油)" align="center" prop="RoutBus5" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutBus5).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="崇明巴士(润滑油)" align="center" prop="RoutCm" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutCm).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金山巴士(润滑油)" align="center" prop="RoutJs" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutJs).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客修公司(润滑油)" align="center" prop="RoutKx" width="130">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RoutKx).toFixed(2)) }}</span>
        </template>
      </el-table-column>


      <el-table-column label="平台(16点 配件)" align="center" prop="inTotalMoney" width="130">
        <template slot-scope="scope">
          <span class="textNum2">{{ formatNumber(parseFloat(scope.row.inTotalMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士一公司(16点 配件)" align="center" prop="inBus1" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inBus1).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士二公司(16点 配件)" align="center" prop="inBus2" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inBus2).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士三公司(16点 配件)" align="center" prop="inBus3" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inBus3).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士四公司(16点 配件)" align="center" prop="inBus4" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inBus4).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士五公司(16点 配件)" align="center" prop="inBus5" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inBus5).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="崇明巴士(16点 配件)" align="center" prop="inCm" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inCm).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金山巴士(16点 配件)" align="center" prop="inJs" width="160">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inJs).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客修公司(16点 配件)" align="center" prop="inKx" width="140">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.inKx).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台(16点 润滑油)" align="center" prop="RinTotalMoney" width="140">
        <template slot-scope="scope">
          <span class="textNum2">{{ formatNumber(parseFloat(scope.row.RinTotalMoney).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士一公司(16点 润滑油)" align="center" prop="RinBus1" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinBus1).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士二公司(16点 润滑油)" align="center" prop="RinBus2" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinBus2).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士三公司(16点 润滑油)" align="center" prop="RinBus3" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinBus3).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士四公司(16点 润滑油)" align="center" prop="RinBus4" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinBus4).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巴士五公司(16点 润滑油)" align="center" prop="RinBus5" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinBus5).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="崇明巴士(16点 润滑油)" align="center" prop="RinCm" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinCm).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金山巴士(16点 润滑油)" align="center" prop="RinJs" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinJs).toFixed(2)) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客修公司(16点 润滑油)" align="center" prop="RinKx" width="170">
        <template slot-scope="scope">
          <span class="textNum">{{ formatNumber(parseFloat(scope.row.RinKx).toFixed(2)) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="NumAll">
      <div class="Num">采购总金额：<span class="kpNum"> {{ formatNumber(this.allMoney)
          }}</span>
      </div>
      <div class="Num">销售总金额：<span class="kpNum"> {{ formatNumber(this.sumMoney) }}</span>
      </div>
      <div class="Num">利润总金额：<span class="kpNum"> {{
      formatNumber(parseFloat(this.productPrice).toFixed(2))
    }}</span></div>
    </div>
    <pagination v-show="total > 0" layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page.sync="queryParams.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>
import { selectProvideWareMoney } from "@/api/system/vendorPayment";
import {downloadGet} from "@/utils/request"

export default {
  name: "VendorPayment-sixteen",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供应商付款表格数据
      vendorPaymentList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        provide: "",
        createTime: ""
      },
      dateTime: [],
      allMoney: '',
      sumMoney: '',
      productPrice: '',
      deptName: "",
      provideShow: false
    };
  },
  created() {
    const User = localStorage.getItem('User');
    this.deptName = JSON.parse(User).dept ? JSON.parse(User).dept.deptName : '';
    if (this.deptName !== '物资公司') {
      this.queryParams.provide = this.deptName;
      this.provideShow = true;
    } else {
      this.queryParams.provide = "";
      this.provideShow = false;
    }
    this.FormData();
    this.getList();
  },
  methods: {
    /** 查询供应商付款列表 */
    getList() {
      this.loading = true;
      // 将日期字符串转换为日期对象
      const dateObj = new Date(this.dateTime);

      // 获取年份和月份
      const year = dateObj.getFullYear();
      const month = dateObj.getMonth() + 1;

      // 格式化月份为两位数
      const formattedMonth = month < 10 ? `0${month}` : `${month}`;

      // 格式化日期
      const formattedStartDate = `${year}-${formattedMonth}`;
      this.queryParams.createTime = formattedStartDate;

      selectProvideWareMoney(this.queryParams.provide, this.queryParams.createTime).then(response => {
        this.allMoney = localStorage.getItem('Headerintotalmoney') ? parseFloat(localStorage.getItem('Headerintotalmoney')).toFixed(2) : 0;
        this.sumMoney = localStorage.getItem('Headerouttotalmoney') ? parseFloat(localStorage.getItem('Headerouttotalmoney')).toFixed(2) : 0;
        this.productPrice = this.sumMoney - this.allMoney;
        this.vendorPaymentList = response.data;
        this.total = this.vendorPaymentList.length;
        this.vendorPaymentList = this.vendorPaymentList.slice((this.queryParams.pageNum - 1) * this.queryParams.pageSize, this.queryParams.pageNum * this.queryParams.pageSize);
        this.vendorPaymentList.forEach((item, index) => {
          item.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
        })

        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.FormData();
      this.handleQuery();
    },


    /** 导出按钮操作 */
    handleExport() {
      downloadGet(`/system/provideRecords/exportProvideWareMoney?createTime=${this.queryParams.createTime}&provide=${this.queryParams.provide}`,{}, `供应商付款16点${this.queryParams.createTime}.xlsx`)
    },
    handleDetailsExport() {
      downloadGet(`/system/provideRecords/exportProvideWareMoneyDetail?createTime=${this.queryParams.createTime}&provide=${this.queryParams.provide}`,{}, `供应商付款16点详情${this.queryParams.createTime}.xlsx`)

    },
    FormData() {
      // 定义一个函数,用于格式化日期为"yyyy-MM"
      const formatDate = date => {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        return `${year}-${month}`;
      };

      // 获取当前日期
      const currentDate = new Date();
      const lastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1);

      // 设置dateTime的初始值为当前年月,并格式化为"yyyy-MM"
      this.dateTime = formatDate(lastMonth);
    },
    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
    },
    // 数字转换
    formatNumber(value) {

      if (value > 0 && value) {
        let [integerPart, decimalPart] = value.toString().split('.');
        let formattedNumber = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '.' + decimalPart.slice(0, 3);
        return formattedNumber;
    } else  {
        return '0.00'; // 当value为0时直接返回'0'
    }

    }
  }
};
</script>
<style lang="scss" scoped>
.textNum {
  float: right;
  color: black;
}
.textNum2{
  float: right;
  color: red;
}

.NumAll {
  position: absolute;
  z-index: 999;
  margin-top: 10px;
  display: flex;

  .Num {
    margin-right: 15px;
    font-size: 15px;
    margin-top: 3px;
    color: #c0c4cc;

    .kpNum {
      font-weight: 600;
      color: red;
    }
  }
}

.textNuM {
  float: right;
  margin-right: 15px;
  font-size: 15px;
  margin-top: 3px;
  color: #c0c4cc;

  .kpNum {
    font-weight: 600;
    color: red;
  }
}
</style>
